<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib prefix="security" uri="http://www.springframework.org/security/tags" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%--<head>
    <meta name="_csrf" content="${_csrf.token}"/>
    <meta name="_csrf_header"  content="${_csrf.headerName}"/>
</head>--%>
<aside class="main-sidebar">
    <!-- sidebar: style can be found in sidebar.less -->
    <section class="sidebar">
        <!-- Sidebar user panel -->
        <div class="user-panel">
            <div class="pull-left image">
                <img src="${pageContext.request.contextPath}/img/user2-160x160.jpg"
                     class="img-circle" alt="User Image">
            </div>
            <div class="pull-left info">
                <p>

                    <security:authentication property="principal.menus" var="menus"
                    ></security:authentication>
                    <security:authentication property="principal.name"></security:authentication>
                </p>
                <a href="#"><i class="fa fa-circle text-success"></i> 在线</a>
            </div>
        </div>

        <!-- sidebar menu: : style can be found in sidebar.less -->
        <ul class="sidebar-menu">
            <li class="header">菜单</li>
            <li id="admin-index"><a
                    href="${pageContext.request.contextPath}/pages/main.jsp"><i
                    class="fa fa-dashboard"></i> <span>首页</span></a></li>
        </ul>
    </section>
    <!-- /.sidebar -->
</aside>
<script src="${pageContext.request.contextPath}/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script>

    $(function () {
        var firstLvId = getFirstLvMenu();//一级菜单
        var secondLvId = getSecondLvMenu();//二级菜单
        //从spring security中提取相关导航栏的字符串
        var menus = '<%= pageContext.getAttribute("menus")%>';
        //将字符串转为json格式
        var json = JSON.parse(menus);
        for (var i in json) {
            menu = json[i];
            //如果父菜单是该菜单，就展开
            if (menu.menuId == firstLvId) {
                html = $('<li menu-id="' + i + '" class="active treeview "><li>');
            } else {
                html = $('<li menu-id="' + i + '" class="treeview "><li>');
            }
            $(".sidebar .sidebar-menu").append(html);
            // console.log(menu.url);
            html = $('<a class="first-menu" href="../' + menu.url + '" οnclick="saveFirstLvMenu(' + menu.id + ')"><i class="fa fa-dashboard"></i> <span>' + menu.menuName + '</span><span class="pull-right-container"><i class="fa fa-angle-left pull-right"></i></span></a><ul menuUL-id="' + i + '" class="treeview-menu"></ul>');
            $('[menu-id="' + i + '"]').append(html);
            //继续遍历二级菜单
            childLen = menu.child.length;
            for (var j in menu.child) {
                child = menu.child[j];
                //如果子菜单是该菜单，则设为active选中
                if (child.menuId == secondLvId) {
                    // console.log(child.url);
                    html = $('<li class="active"><a class="second-menu" href="' + child.url + '" οnclick="saveSecondLvMenu(' + child.id + ')"><i class="fa fa-circle-o"></i>' + child.menuName + '</a></li>');
                } else {
                    html = $('<li><a class="second-menu" href="' + child.url + '" οnclick="saveSecondLvMenu(' + child.id + ')"><i class="fa fa-circle-o"></i>' + child.menuName + '</a></li>');
                }
                $('[menuUL-id="' + i + '"]').append(html);
            }
        }
        /*  $.ajax({
              type: 'get',
              url: '/menu/tree.do',
              dataType: 'json',
              data: {"id": id},
              success: function (data) {
                  var menu = null;
                  var html = null;
                  var childLen = null;
                  var child = null;
                  var json = data;
                  for (var i in json) {
                      menu = json[i];
                      //如果父菜单是该菜单，就展开
                      if (menu.menuId == firstLvId) {
                          html = $('<li menu-id="' + i + '" class="active treeview "><li>');
                      } else {
                          html = $('<li menu-id="' + i + '" class="treeview "><li>');
                      }
                      $(".sidebar .sidebar-menu").append(html);
                      // console.log(menu.url);
                      html = $('<a class="first-menu" href="../' + menu.url + '" οnclick="saveFirstLvMenu(' + menu.id + ')"><i class="fa fa-dashboard"></i> <span>' + menu.menuName + '</span><span class="pull-right-container"><i class="fa fa-angle-left pull-right"></i></span></a><ul menuUL-id="' + i + '" class="treeview-menu"></ul>');
                      $('[menu-id="' + i + '"]').append(html);
                      //继续遍历二级菜单
                      childLen = menu.child.length;
                      for (var j in menu.child) {
                          child = menu.child[j];
                          //如果子菜单是该菜单，则设为active选中
                          if (child.menuId == secondLvId) {
                              // console.log(child.url);
                              html = $('<li class="active"><a class="second-menu" href="' + child.url + '" οnclick="saveSecondLvMenu(' + child.id + ')"><i class="fa fa-circle-o"></i>' + child.menuName + '</a></li>');
                          } else {
                              html = $('<li><a class="second-menu" href="' + child.url + '" οnclick="saveSecondLvMenu(' + child.id + ')"><i class="fa fa-circle-o"></i>' + child.menuName + '</a></li>');
                          }
                          $('[menuUL-id="' + i + '"]').append(html);
                      }
                  }
              },

          });*/
    });

    function saveFirstLvMenu(menuId) {
        var id = JSON.stringify(menuId);
        window.sessionStorage.setItem("firstMenuId", id);
    }

    function saveSecondLvMenu(menuId) {
        var id = JSON.stringify(menuId);
        window.sessionStorage.setItem("secondMenuId", id);
    }

    function saveThirdLvMenu(menuId) {
        var id = JSON.stringify(menuId);
        window.sessionStorage.setItem("thirdMenuId", id);
    }

    function getFirstLvMenu() {
        return JSON.parse(window.sessionStorage.getItem("firstMenuId"));
    }

    function getSecondLvMenu() {
        return JSON.parse(window.sessionStorage.getItem("secondMenuId"));
    }

</script>